"use client"

import type React from "react"

import { useRef, useState } from "react"
import { motion, useInView } from "framer-motion"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { Github, Mail, MapPin, Phone } from "lucide-react"
import { DouyinIcon, KuaishouIcon, BilibiliIcon, XiaohongshuIcon, GiteeIcon } from "./social-icons"

export default function Contact() {
  const ref = useRef<HTMLDivElement>(null)
  const formRef = useRef<HTMLFormElement>(null)
  const isInView = useInView(ref, { once: true, amount: 0.2 })
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)

    // Simulate form submission
    await new Promise((resolve) => setTimeout(resolve, 1500))

    toast({
      title: "消息已发送！",
      description: "感谢您的留言，我会尽快回复您。",
    })

    formRef.current?.reset()
    setIsSubmitting(false)
  }

  return (
    <section id="contact" ref={ref} className="py-20 bg-muted/10 backdrop-blur-sm relative">
      {/* Animated background waves */}
      <div className="absolute inset-0 pointer-events-none">
        <motion.div
          className="absolute inset-0 opacity-10"
          style={{
            background: `linear-gradient(45deg, transparent 30%, #3b82f6 50%, transparent 70%), 
                        linear-gradient(-45deg, transparent 30%, #8b5cf6 50%, transparent 70%)`,
          }}
          animate={{
            backgroundPosition: ["0% 0%", "100% 100%"],
          }}
          transition={{
            duration: 15,
            repeat: Number.POSITIVE_INFINITY,
            repeatType: "reverse",
          }}
        />
      </div>

      <div className="container max-w-6xl mx-auto px-4 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.6 }}
          className="space-y-2 text-center mb-16"
        >
          <Badge variant="outline" className="px-3 py-1 text-sm bg-background/50 backdrop-blur-sm">
            联系方式
          </Badge>
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight">联系我</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">有项目想法或想讨论合作机会？我很乐意听到您的声音。</p>
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-8">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
            transition={{ duration: 0.6 }}
            className="space-y-8"
          >
            <div className="space-y-6">
              <h3 className="text-2xl font-bold">联系信息</h3>
              <p className="text-muted-foreground">
                欢迎通过以下任何方式与我联系。我始终乐于讨论新项目、创意想法或合作机会。
              </p>
            </div>

            <div className="grid gap-6">
              {[
                { icon: Mail, label: "邮箱", value: "2205425481@qq.com" },
                { icon: Phone, label: "电话", value: "+86 136 1693 2995" },
                { icon: MapPin, label: "位置", value: "福建省,福州" },
              ].map((item, index) => (
                <motion.div
                  key={item.label}
                  initial={{ opacity: 0, y: 20 }}
                  animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                  transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
                  whileHover={{ scale: 1.02, y: -2 }}
                >
                  <Card className="bg-background/50 backdrop-blur-sm border-muted/20 hover:border-primary/20 transition-all duration-300">
                    <CardContent className="flex items-center gap-4 p-4">
                      <motion.div
                        className="bg-gradient-to-r from-primary/10 to-purple-500/10 p-3 rounded-full"
                        whileHover={{ rotate: 360 }}
                        transition={{ duration: 0.5 }}
                      >
                        <item.icon className="h-6 w-6 text-primary" />
                      </motion.div>
                      <div>
                        <p className="text-sm text-muted-foreground">{item.label}</p>
                        <p className="font-medium">{item.value}</p>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>

            <div className="space-y-4">
              <h4 className="font-medium">社交媒体</h4>
              <div className="grid grid-cols-3 gap-4">
                {[
                  {
                    icon: Github,
                    href: "https://github.com/Hanyeweiyang",
                    label: "GitHub",
                    color: "hover:text-gray-900 dark:hover:text-white",
                    bgColor: "hover:bg-gray-100 dark:hover:bg-gray-800",
                  },
                  {
                    icon: GiteeIcon,
                    href: "https://gitee.com/hanyeweiyang",
                    label: "Gitee",
                    color: "hover:text-red-600",
                    bgColor: "hover:bg-red-50 dark:hover:bg-red-900/20",
                  },
                  {
                    icon: BilibiliIcon,
                    href: "https://space.bilibili.com/36657163?spm_id_from=333.1007.0.0",
                    label: "哔哩哔哩",
                    color: "hover:text-pink-500",
                    bgColor: "hover:bg-pink-50 dark:hover:bg-pink-900/20",
                  },
                ].map((social, index) => (
                  <motion.div
                    key={social.label}
                    whileHover={{ scale: 1.1, y: -2 }}
                    whileTap={{ scale: 0.95 }}
                    className="flex flex-col items-center gap-2"
                    initial={{ opacity: 0, y: 20 }}
                    animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
                    transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
                  >
                    <Button
                      variant="outline"
                      size="icon"
                      asChild
                      className={`bg-background/50 backdrop-blur-sm transition-all duration-300 border-muted/20 ${social.color} ${social.bgColor} hover:border-primary/20 hover:shadow-lg`}
                    >
                      <a href={social.href} target="_blank" rel="noopener noreferrer">
                        <social.icon className="h-5 w-5" />
                        <span className="sr-only">{social.label}</span>
                      </a>
                    </Button>
                    <span className="text-xs text-muted-foreground text-center font-medium">{social.label}</span>
                  </motion.div>
                ))}
              </div>
              <motion.p
                className="text-xs text-muted-foreground/80 text-center mt-4"
                initial={{ opacity: 0 }}
                animate={isInView ? { opacity: 1 } : { opacity: 0 }}
                transition={{ duration: 0.5, delay: 1 }}
              >
                关注我的社交媒体获取最新动态
              </motion.p>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
            transition={{ duration: 0.6, delay: 0.2 }}
          >
            <Card className="bg-background/50 backdrop-blur-sm border-muted/20">
              <CardContent className="p-6">
                <form ref={formRef} onSubmit={handleSubmit} className="space-y-6">
                  <div className="grid sm:grid-cols-2 gap-4">
                    <motion.div className="space-y-2" whileFocus={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
                      <Label htmlFor="name">姓名</Label>
                      <Input id="name" placeholder="您的姓名" required className="bg-background/50" />
                    </motion.div>
                    <motion.div className="space-y-2" whileFocus={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
                      <Label htmlFor="email">邮箱</Label>
                      <Input id="email" type="email" placeholder="您的邮箱" required className="bg-background/50" />
                    </motion.div>
                  </div>

                  <motion.div className="space-y-2" whileFocus={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
                    <Label htmlFor="subject">主题</Label>
                    <Input id="subject" placeholder="我能为您做些什么？" required className="bg-background/50" />
                  </motion.div>

                  <motion.div className="space-y-2" whileFocus={{ scale: 1.02 }} transition={{ duration: 0.2 }}>
                    <Label htmlFor="message">留言</Label>
                    <Textarea
                      id="message"
                      placeholder="告诉我您的项目..."
                      className="min-h-[150px] bg-background/50"
                      required
                    />
                  </motion.div>

                  <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                    <Button
                      type="submit"
                      className="w-full bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90"
                      disabled={isSubmitting}
                    >
                      {isSubmitting ? "发送中..." : "发送消息"}
                    </Button>
                  </motion.div>
                </form>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
